<template>
  <div id="app">
    <el-container>
      <el-header v-show="isNavShow" id="header-pane" height="6vh">
        <div id="nav">
          <el-row>
            <el-col :span="4">
              <div id="logo">
                <router-link to="/" id="logo-link">
                  <span class="theme">衍星</span>
                  <span class="black">书院</span>
                </router-link>
                <span id="logo-version">v0.6.0</span>
              </div>
            </el-col>
            <el-col :span="12">
              <el-menu :default-active="activeIndex" class="el-menu top-menu" id="top-menu" mode="horizontal" router>
                <el-menu-item index="/class"><span class="theme">学堂</span></el-menu-item>
                <el-menu-item index="/library"><span class="theme">书馆</span></el-menu-item>
                <el-menu-item index="/works"><span class="theme">文坛</span></el-menu-item>
                <el-menu-item index="/pins"><span class="theme">剪藏</span></el-menu-item>
                <el-menu-item index="/poems"><span class="theme">诗社</span></el-menu-item>
                <el-menu-item index="/people"><span class="theme">茶肆</span></el-menu-item>
                <el-menu-item index="/coding"><span class="theme">码源</span></el-menu-item>
                <el-menu-item index="/dev"><span class="theme">公告</span></el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="6">
            </el-col>
            <el-col :span="2">
              <div class="options">
                <div v-show="!isAuthed">
                  <router-link to="/user/login">
                    <ri i="user" @click="login"></ri>
                  </router-link>
                </div>
                <div v-show="isAuthed">
                  <user-options></user-options>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-main id="main-pane">
        <router-view></router-view>
      </el-main>
      <el-footer id="footer-pane" height="2vh">
        <a href="http://yanxingshuyuan.com">@2021 衍星书院</a>
        <a href="https://beian.miit.gov.cn/" target="_blank">桂ICP备2021001252号</a>
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=45010202000520">
          桂公网安备 45010202000520 号
        </a>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import UserOptions from "./views/user/UserOptions"

export default {
  name: "app",
  components: {
    UserOptions,
  },
  data() {
    return {
      isNavShow: true,
    };
  },
  computed: {
    isAuthed() {
      return this.$store.getters.isAuth;
    },
    activeIndex() {
      return this.$store.getters.activeMenuIndex;
    },
  },
  watch: {
    $route() {
      this.checkToken();
    },
  },
  methods: {
    login() {
      console.log("login");
    },
    changeLocale(loc) {
      this.$i18n.locale = loc;
    },
    userOptions() {
      console.log("show options");
    },
    hideNavMenu() {
      this.isNavShow = false;
    },
    checkToken() {
      let expireIn = this.$store.getters.expireIn;
      let expMinute = (new Date(expireIn).getTime() - Date.now()) / 1000 / 60;
      console.log("Token expire in ", Math.floor(expMinute), " minutes");
      if (expMinute < 30) {
        this.refreshToken();
      }
    },
    refreshToken() {
      console.log("refreshing token...");
      let refreshUrl = "/api/v1/token/refresh";
      let self = this;
      this.authGet(refreshUrl)
        .then((res) => {
          let token = res.data.token;
          let expire = res.data.expire;
          let user = {
            token: token,
            expire: expire,
          };
          self.$store.dispatch("refreshToken", user);
        })
        .catch((err) => {
          console.log("refresh failed!", err);
          self.$message("用户登录过期，请重新登录！");
          this.$store.dispatch("logout");
        });
    },
  },
};
</script>

<style lang="stylus">
*
  margin 0
  padding 0

a
  text-decoration none
  cursor pointer
  color #999

  &:hover
    color #409EFF
</style>


